<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false" @close="close()" width="60%" top="80px">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '170px' : '170px'" :disabled="disabled">
        <el-row>
            <el-col :span="12">
                <el-form-item label="导游姓名" prop="name">
                    <el-input v-model="dataForm.name" placeholder="导游姓名"></el-input>
                </el-form-item>

            </el-col>
            <el-col :span="12">
                <el-form-item label="导游电话" prop="phone">
                    <el-input v-model="dataForm.phone" placeholder="导游电话"></el-input>
                </el-form-item>

            </el-col>
            <el-col :span="12">
                <el-form-item label="导游证书名称(二级等)" prop="certName">
                    <el-input v-model="dataForm.certName" placeholder="导游证书名称(二级等)"></el-input>
                </el-form-item>

            </el-col>

            <el-col :span="12">
                <el-form-item label="是否实名认证" prop="isAuth">
                    <el-radio v-model="dataForm.isAuth" :label="item.value" v-for="item, index in radioOptions" :key="index">{{
              item.name }}</el-radio>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="是否明星导游" prop="isStar">
                    <el-radio v-model="dataForm.isStar" :label="item.value" v-for="item, index in radioOptions" :key="index">{{
              item.name }}</el-radio>
                </el-form-item>

            </el-col>
            <el-col :span="12">
                <el-form-item label="是否专业" prop="isProfessional">
                    <el-radio v-model="dataForm.isProfessional" :label="item.value" v-for="item, index in radioOptions" :key="index">{{
                item.name }}</el-radio>

                </el-form-item>

            </el-col>

            <el-col :span="12">
                <el-form-item label="排序" prop="sortVal">
                    <el-input-number v-model="dataForm.sortVal" placeholder="排序"></el-input-number>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="dataForm.idCard" placeholder="身份证号" type="text"></el-input>
                </el-form-item>

            </el-col>
            <el-col :span="12">
                <el-form-item label="入驻时长(单位:年)" prop="enterTime">
                    <el-input v-model="dataForm.enterTime" placeholder="入驻时长(单位:年)" type="number"></el-input>
                </el-form-item>

            </el-col>

            <el-col :span="12">
                <el-form-item label="导游标签" prop="tagsIdList">
                    <ren-select v-model="dataForm.tagsIdList" multiple dict-type="GuideTagType" placeholder="请选择标签" style="width:100%"></ren-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="导游头像(最多1张)" prop="">
                    <!-- <el-input v-model="dataForm.logoUrl" placeholder="导游头像url"></el-input> -->
                    <el-upload :action="url" :file-list="fileList" :limit="1" :before-upload="beforeUploadHandle" list-type="picture-card" :on-success="successHandle" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="导游证图片(最多3张)" prop="">
                    <!-- <el-input v-model="dataForm.certUrl" placeholder="导游证图片"></el-input> -->
                    <el-upload :action="url" :file-list="fileListtwo" :limit="3" :before-upload="beforeUploadHandle" list-type="picture-card" :on-success="successHandletwo" :on-remove="handleRemovetwo" :disabled="disabled">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="负责路线" prop="routeIdList">
                    <el-select multiple v-model="dataForm.routeIdList" style="width:100%">
                        <el-option v-for="item, index in routeList" :key="index" :value="item.id" :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="导游简介" prop="guideIntro">
                    <el-input v-model="dataForm.guideIntro" placeholder="导游简介" type="textarea" :row="4"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <template slot="footer" v-if="!disabled">
        <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
</el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import Cookies from 'js-cookie'

export default {
    data() {
        return {
            fileListtwo: [],
            url: `${window.SITE_CONFIG['apiURL']
        }/oss/file/aliyunUpload?access_token=${Cookies.get('access_token')}`,
            fileList: [],
            radioOptions: [{
                    name: '是',
                    value: '1'
                },
                {
                    name: '否',
                    value: '0'
                },
            ],
            visible: false,
            dataForm: {
                id: '',
                name: '',
                phone: '',
                logoUrl: '',
                certName: '',
                certUrl: '',
                isAuth: null,
                isStar: null,
                isProfessional: null,
                sortVal: '',
                //  serveNum: '',
                //  serveScore: '',
                //  cmtTotalNum: '',
                idCard: '',
                enterTime: '',
                guideIntro: '',
                guideTags: '',
                creator: '',
                createDate: '',
                updater: '',
                updateDate: '',
            },
            routeList: []
        }
    },
    props: {
        disabled: Boolean
    },
    mounted() {
        this.getRouteList()
    },
    computed: {

        dataRule() {
            return {
                name: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                phone: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                logoUrl: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                certName: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                certUrl: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                isAuth: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                isStar: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                isProfessional: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                sortVal: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                // serveNum: [
                //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                // ],
                // serveScore: [
                //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                // ],
                // cmtTotalNum: [
                //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                // ],
                idCard: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                enterTime: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                guideIntro: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                guideTags: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                creator: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                createDate: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                updater: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                updateDate: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }]
            }
        }
    },
    watch: {
    },
    methods: {
        close() {
            this.fileList = [];
            this.fileListtwo = [];
            this.dataForm = {
                id: '',
                name: '',
                phone: '',
                logoUrl: '',
                certName: '',
                certUrl: '',
                isAuth: null,
                isStar: null,
                isProfessional: null,
                sortVal: '',
                serveNum: '',
                serveScore: '',
                cmtTotalNum: '',
                idCard: '',
                enterTime: '',
                guideIntro: '',
                guideTags: '',
                creator: '',
                createDate: '',
                updater: '',
                updateDate: '',
            };
            this.$emit("changeDisabled");
        },
        handleRemove(file, fileList) {
            // let fidx = this.fileList.findIndex(f => f.uid == file.uid);
            // this.fileList.splice(fidx, 1);
            console.log('111111111111111111', file, fileList)
            if (fileList.length == 0) {
                this.dataForm.logoUrl = ''
            }
            // this.dataForm.pic = fileList.map((item) => {
            //   return item.url;
            // });
        },
        // 上传之前
        beforeUploadHandle(file) {
            if (
                file.type !== 'image/jpg' &&
                file.type !== 'image/jpeg' &&
                file.type !== 'image/png' &&
                file.type !== 'image/gif'
            ) {
                this.$message.error(this.$t('upload.tip', {
                    format: 'jpg、png、gif'
                }))
                return false
            }
        },
        // 上传成功
        successHandle(res, file, fileList) {
            console.log(res, file, fileList, '**************');
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.fileList.unshift({
                name: '',
                url: res.data.url,
            })
            this.dataForm.logoUrl = this.fileList[0].url
            // this.dataForm.pic = this.fileList.map((item) => {
            //   return item.url;  路线规划  Routeplanning
            // });
        },
        // 上传成功
        successHandletwo(res, file, fileList) {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.fileListtwo.unshift({
                name: '',
                url: res.data.url,
            })
            this.dataForm.certUrl = this.fileListtwo.map((item) => {
                return item.url
            }).toString()

        },
        handleRemovetwo(file, fileList) {
            if (fileList.length == 0) {
                this.dataForm.certUrl = ''
                this.fileListtwo = []
            } else {
                this.fileListtwo = fileList
                this.dataForm.certUrl = fileList.map((item) => {
                    return item.url
                }).toString()
            }

        },
        getRouteList() {
            this.$http.post('scenic/guideserveroute/selectAll').then((res) => {
                if (res.data.msg == 'success') {
                    this.routeList = res.data.data
                }
            })
        },
        init() {
            this.visible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].resetFields()

                if (this.dataForm.id) {
                    this.getInfo()
                }
            })
        },
        // 获取信息
        getInfo() {
            this.$http.get(`/scenic/guideinfo/${this.dataForm.id}`).then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                this.dataForm = {
                    ...this.dataForm,
                    ...res.data
                }
                if (this.dataForm.logoUrl) {
                    this.fileList = [{
                        name: '',
                        url: this.dataForm.logoUrl
                    }]
                } else {
                    this.fileList = []
                }

                if (this.dataForm.certUrl) {
                    let lsdata = this.dataForm.certUrl.split(',')
                    this.fileListtwo = lsdata.map((item, index, arr) => {
                        let json = {}
                        json.name = ''
                        json.url = item
                        return json
                    })
                } else {
                    this.fileListtwo = []
                }
            }).catch(() => {})
        },
        // 表单提交
        dataFormSubmitHandle: debounce(function () {
            this.$refs['dataForm'].validate((valid) => {
                if (!valid) {
                    return false
                }

                // this.dataForm.guideTags = this.dataForm.guideTags.join(',')

                this.$http[!this.dataForm.id ? 'post' : 'put']('/scenic/guideinfo/', this.dataForm).then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.$message({
                        message: this.$t('prompt.success'),
                        type: 'success',
                        duration: 500,
                        onClose: () => {
                            this.visible = false
                            this.$emit('refreshDataList')
                        }
                    })
                }).catch(() => {})
            })
        }, 1000, {
            'leading': true,
            'trailing': false
        })
    }
}
</script>
